<template>
  <div class="sider-wrapper" v-show="openStatus" @click.self="close">
    <div class="sider-content animated faster" :class="classObject" :style="styleObject">
      <el-card class="box-card">
        <div slot="header">
          <span>{{title}}</span>
          <el-button  class="btn-close" type="text" @click="close"><i class="el-icon el-icon-close"></i></el-button>
        </div>
        <div class="text item">
          <slot/>
        </div>
      </el-card>
      
    </div>
  </div>
</template>
<script>

export default {
  name: 'Sider',
  props: {
    // 状态
    isOpen: {
      type: Boolean,
      default: false
    },
    // 标题
    title:{
      type: String,
      default: '信息'
    },
    // 位置，只能为left right
    position:{
      type: String,
      default: 'left',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['left', 'right'].indexOf(value) !== -1
      }
    },
    styleObject:{
      type: Object,
      default: function(){
        return {
          left:'0px',
          top:'100px'
        }
      }
    }
  },
  data () {
    return {
      openStatus : this.isOpen
      
    }
  },
  computed: {
    classObject(){
      return {
        "fadeInLeft": (this.position == 'left') && this.openStatus ,
        "fadeOutLeft": (this.position == 'left') && !this.openStatus ,
        "fadeInRight": (this.position == 'right') && this.openStatus ,
        "fadeOutRight": (this.position == 'right') && !this.openStatus
      }
    }
  },
  mounted () {
  },
  beforeDestroy () {
  },
  methods: {
    close(){
      this.openStatus = false
    },
    open(){
      this.openStatus = true
    }
  }
}
</script>

<style scoped>
.sider-wrapper{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2001;
}
.sider-content{
  position: absolute;
  width:auto;
  margin: 10px;
  background-color: white;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 6px 20px;
  border-radius: 5px;
}
.btn-close{
  float: right; 
  padding: 3px 0
}

</style>
